<template>
  <a-layout-sider
    class="app-sidebar"
    v-model:collapsed="collapsed"
    :trigger="null"
    collapsible
    :theme="theme"
  >
    <div class="logo">
      <img src="../assets/logo.png" alt="Logo" />
      <h1 v-if="!collapsed">房价分析系统</h1>
    </div>
    <a-menu
      v-model:selectedKeys="selectedKeys"
      :theme="theme"
      mode="inline"
    >
      <a-menu-item key="/">
        <template #icon><home-outlined /></template>
        <router-link to="/">首页</router-link>
      </a-menu-item>
      
      <a-menu-item key="/search">
        <template #icon><search-outlined /></template>
        <router-link to="/search">房源搜索</router-link>
      </a-menu-item>
      
      <a-menu-item key="/analysis">
        <template #icon><bar-chart-outlined /></template>
        <router-link to="/analysis">房源分析</router-link>
      </a-menu-item>
      
      <a-menu-item key="/data-analysis">
        <template #icon><pie-chart-outlined /></template>
        <router-link to="/data-analysis">数据分析</router-link>
      </a-menu-item>
      
      <a-menu-item key="/city-comparison">
        <template #icon><apartment-outlined /></template>
        <router-link to="/city-comparison">城市对比</router-link>
      </a-menu-item>
      
      <a-menu-item key="/district-analysis">
        <template #icon><cluster-outlined /></template>
        <router-link to="/district-analysis">区域分析</router-link>
      </a-menu-item>
    </a-menu>
    
    <div class="sidebar-footer">
      <a-switch
        v-model:checked="isDarkMode"
        checked-children="暗"
        un-checked-children="亮"
        @change="toggleTheme"
      />
      <a-button
        class="collapse-btn"
        :type="theme === 'dark' ? 'primary' : 'default'"
        @click="toggleCollapse"
      >
        <menu-unfold-outlined v-if="collapsed" />
        <menu-fold-outlined v-else />
      </a-button>
    </div>
  </a-layout-sider>
</template>

<script>
import { ref, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import {
  HomeOutlined,
  SearchOutlined,
  BarChartOutlined,
  ApartmentOutlined,
  ClusterOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined
} from '@ant-design/icons-vue';

export default {
  components: {
    HomeOutlined,
    SearchOutlined,
    BarChartOutlined,
    ApartmentOutlined,
    ClusterOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined
  },
  setup() {
    const route = useRoute();
    const collapsed = ref(false);
    const isDarkMode = ref(false);
    const theme = ref('light');
    
    // 当前选中的菜单项
    const selectedKeys = ref([route.path]);
    
    // 监听路由变化，更新选中的菜单项
    watch(() => route.path, (newPath) => {
      selectedKeys.value = [newPath];
    });
    
    // 切换侧边栏折叠状态
    const toggleCollapse = () => {
      collapsed.value = !collapsed.value;
    };
    
    // 切换主题
    const toggleTheme = (checked) => {
      theme.value = checked ? 'dark' : 'light';
    };
    
    return {
      collapsed,
      isDarkMode,
      theme,
      selectedKeys,
      toggleCollapse,
      toggleTheme
    };
  }
};
</script>

<style lang="scss" scoped>
.app-sidebar {
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  
  .logo {
    height: 64px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
    img {
      height: 32px;
      margin-right: 8px;
    }
    
    h1 {
      color: #fff;
      font-size: 18px;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  
  .sidebar-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    
    .collapse-btn {
      margin-left: 8px;
    }
  }
}
</style> 